<template>
	<view class="content">
		<view class="header">
			<view class="headtitle">
				通讯录
			</view>
			<view class="">
				<img src="../../static/search.png" class="search" alt="" srcset="">
				<img src="../../static/add.png" class="add" @click="add" alt="" srcset="">
			</view>
		</view>
		<view class="txl">
			<view class="txlmenu">
				<view class="leftmenu">
					<img src="../../static/friend.png" alt="" />
				</view>
				<view class="rightmenu">
					新的朋友
				</view>
			</view>
			<view class="txlmenu">
				<view class="leftmenu">
					<img src="../../static/group.png" alt="" />
				</view>
				<view class="rightmenu">
					群聊
				</view>
			</view>
			<view class="txlmenu">
				<view class="leftmenu">
<!-- 					<img src="../../static/tag.png" alt="" /> -->
				</view>
				<view class="rightmenu">
					标签
				</view>
			</view>
			<view class="phonelist">
				<view class="namearr" v-for="item in namearr">
					<view class="label" v-if="item.value.length!==0">
						{{item.lable}}
					</view>
					<view class="txlmenu" v-for="item1 in item.value" v-if="item.value!==undefined">
						<view class="leftmenu">
<!-- 							<img src="../../static/tag.png" alt="" /> -->
						</view>
						<view class="rightmenu">
							{{item1.name}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import pinyin from 'js-pinyin'
	export default {
		data() {
			return {

				firstPin: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W",
					"X", "Y", "Z"
				],
				namejson: {}, //转换为拼音后的数据
				newarr: [],
				namearr: [],
				list: [{
						name: "高斯"
					},
					{
						name: "初代奥特曼"
					},
					{
						name: "泰罗"
					},
					{
						name: "迪迦"
					},
					{
						name: "特利加"
					},
					{
						name: "曾程康"
					},
				]
			}
		},
		mounted() {
			this.getdata()
		},
		methods: {
			getdata() {
				let pinyin = require('js-pinyin')
				pinyin.setOptions({
					checkPolyphone: false,
					charCase: 0
				})
				for (var i = 0; i < this.list.length; i++) {
					let peoplename = this.list[i].name;
					let firstname = pinyin.getCamelChars(peoplename).substring(0, 1);
					this.list[i].first = firstname;
					this.newarr.push(this.list[i])
					console.log(this.newarr);
				}
				let namejson = {};
				for (var j = 0; j < this.firstPin.length; j++) {
					console.log(this.firstPin[j])
					console.log(namejson)
					namejson[this.firstPin[j]] = this.newarr.filter((value) => {
						console.log(value)
						console.log(this.firstPin[j])
						return value.first === this.firstPin[j]
					})
				}
				this.namejson = namejson
				console.log(this.namejson)
				let arrr = Object.values(this.namejson);
				console.log(arrr, "arrr")
				console.log(this.firstPin, "firstpin");
				for (var x = 0; x < this.firstPin.length; x++) {
					for (var y = 0; y < arrr.length; y++) {
						if (x == y) {
							this.namearr.push({
								lable: this.firstPin[x],
								value: arrr[y]
							})
						}

					}
				}
				console.log(this.namearr, "namearrr");


			}
		}
	}
</script>

<style>
	.namearr{
		margin-bottom: 20rpx;
	}
	.label{
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.phonelist {
		margin-top: 20rpx;
	}

	.txlmenu {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 20rpx;
		background: #fff;
		box-sizing: border-box;
	}

	.leftmenu {
		/* 		width: 114rpx;
		height: 116rpx; */
		float: left;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.leftmenu img {
		width: 74rpx;
		height: 76rpx;
	}

	.rightmenu {
		width: calc(100% - 94rpx);
		height: 76rpx;
		float: right;
		padding-left: 20rpx;
		box-sizing: border-box;
		line-height: 76rpx;
		text-align: left;
		border-bottom: 1px solid #dee2e6;
	}

	.content {
		width: 100%;
		height: 100%;
		background: #f8f9fa;
	}

	.header {
		width: 100%;
		height: 90rpx;
		background: #f8f9fa;
		display: flex;
		box-sizing: border-box;
		padding: 0px 20rpx;
		justify-content: space-between;
		align-items: center;

	}

	.search {
		width: 40rpx;
		margin-right: 30rpx;
		height: 42rpx;
		/* 		height: 42rpx; */
	}

	.add {
		width: 40rpx;
		height: 42rpx;
	}

	.headtitle {
		font-size: 36rpx;
	}

	.txl {
		width: 100%;
		height: calc(100% - 90rpx);
		overflow: auto;
	}
</style>